<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pinia 在组件中共享数据</title>
</head>
<body>
<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
</div>

<template id="cpn">
    <h1>当前计数：{{ count }}</h1>
    <button v-on:click="dec">-</button>
    <button v-on:click="inc">+</button>
    <br>
    <button v-on:click="reset">重置</button>
</template>

<script type="module">
    import {createApp, defineComponent} from "../../../../js/vue.esm-browser.js";


    import {createPinia, defineStore, storeToRefs} from "../../../../js/pinia.esm-browser.js";


    // 定义全局共享的变量，可以读写
    // 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
    let useCountStore = defineStore(
        // 第一个参数是 全局 store 标识符，注意：不能重复
        "counter",
        // 第二个参数可接受两类值：Setup 函数或 Option 对象。
        {
            // state 是 store 的数据 (data)
            state: () => {
                return {
                    count: 0,
                }
            },
            // getters 是 store 的计算属性 (computed)
            getters: {},
            // actions 则是方法 (methods)
            actions: {
                increase() {
                    this.count++
                },
                decrease() {
                    this.count--
                }
            }
        }
    );

    let cpn1 = defineComponent(
        {
            template: "#cpn",
            setup() {
                let store = useCountStore();
                console.log(store);

                // let {count} = store;
                let {count} = storeToRefs(store)

                function inc() {
                    console.log("++++++++++");
                    store.increase()
                }

                function dec() {
                    console.log("----------");
                    store.decrease()
                }

                function reset() {
                    store.$reset()
                }

                return {
                    count,
                    inc,
                    dec,
                    reset,
                }
            }
        }
    );

    let cpn2 = defineComponent(
        {
            template: "#cpn",
            setup() {
                let store = useCountStore();
                console.log(store);

                // let {count} = store;
                let {count} = storeToRefs(store)

                function inc() {
                    console.log("++++++++++");
                    store.increase()
                }

                function dec() {
                    console.log("----------");
                    store.decrease()
                }

                function reset() {
                    store.$reset()
                }

                return {
                    count,
                    inc,
                    dec,
                    reset,
                }
            }
        }
    );

    let pinia = createPinia()

    let app = createApp(
        {
            setup() {
                return {}
            },
            components: {
                cpn1,
                cpn2,
            }
        }
    )
    app.use(pinia)
    app.mount("#app")
</script>
</body>
</html>